<!DOCTYPE html>
<html ng-app="myApp">

	<head>
		<meta charset="UTF-8">
		<title>表单验证</title>
		<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" type="text/javascript"></script>
		<style type="text/css">
			.divStyle {
				border: 1px solid #1E7BE4;
				margin-bottom: 10px;
				background-color: #F0F0F0;
			}
		</style>
	</head>

	<body>
		<div ng-controller="ExampleController" class="divStyle">
			<h3>1、内外层循环</h3>
			<div ng-repeat="innerList in list" ng-init="outerIndex = $index" ng-cloak>
				<div ng-repeat="value in innerList" ng-init="innerIndex = $index">
					<span class="example-init">list[ {{outerIndex}} ][ {{innerIndex}} ] = {{value}};</span>
				</div>
			</div>
		</div>
		<form ng-controller="FormController" name="myForm" class="divStyle">
			<h3>2、Form表单验证</h3>
			<p>用户名:<br>
				<input type="text" name="user" ng-model="User.nicknm" required>
				<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  				<span ng-show="myForm.user.$error.required">用户名是必须的。</span>
			</p>

			<p>邮箱:<br>
				<input type="email" name="email" ng-model="User.email" required>
				<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  				<span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
				<span ng-show="myForm.email.$error.email">非法的邮箱。</span>
			</p>

			<p>
				<input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid 
					|| myForm.email.$dirty && myForm.email.$invalid">
			</p>
		</form>
		<div ng-controller="repeatController" class="divStyle">
			<h3>3、filter过滤数据</h3> I have friends. They are:
			<input type="search" ng-model="q" placeholder="filter friends..." />
			<ul class="example-animate-container">
				<li class="animate-repeat" ng-repeat="friend in friends | filter:q as results">
					{{friend.name}} is {{friend.age}} years old. Gender：{{friend.gender}}
				</li>
				<li class="animate-repeat" ng-if="results.length == 0">
					<strong>No results found...</strong>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		angular.module('myApp', [])
			.controller('ExampleController', ['$scope', function($scope) {
				$scope.list = [
					['a', 'b'],
					['c', 'd']
				];
			}])
			.controller('FormController', ['$scope', function($scope) {
				$scope.User = {};
				$scope.User.nicknm = 'guest';
				$scope.User.email = 'guest@163.com';
			}])
			.controller('repeatController', ['$scope', function($scope) {
				$scope.friends = [{
					name: 'John',
					age: 25,
					gender: 'boy'
				}, {
					name: 'Jessie',
					age: 30,
					gender: 'girl'
				}, {
					name: 'Johanna',
					age: 28,
					gender: 'girl'
				}, {
					name: 'Joy',
					age: 15,
					gender: 'girl'
				}, {
					name: 'Mary',
					age: 28,
					gender: 'girl'
				}, {
					name: 'Peter',
					age: 95,
					gender: 'boy'
				}, {
					name: 'Sebastian',
					age: 50,
					gender: 'boy'
				}, {
					name: 'Erika',
					age: 27,
					gender: 'girl'
				}, {
					name: 'Patrick',
					age: 40,
					gender: 'boy'
				}, {
					name: 'Samantha',
					age: 25,
					gender: 'girl'
				}];
			}]);
	</script>

</html>